<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar v-if="hasPermission(['account_add'])">
        <a-button type="primary" @click="handleCreate">新增账号</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
            :actions="[
               {
                icon: 'clarity:refresh-line',
                tooltip: '刷新用户信息',
                onClick: handleRefresh,
               },
              {
                icon: 'clarity:info-standard-line',
                tooltip: '查看用户详情',
                onClick: handleView.bind(null, record),
                ifShow: () => hasPermission(['account_read']),
              },
              {
                icon: 'clarity:note-edit-line',
                tooltip: '编辑用户资料',
                onClick: handleEdit.bind(null, record),
                ifShow: () => hasPermission(['account_update']),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                tooltip: '删除此账号',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
                ifShow: () => hasPermission(['account_delete']),
              },
            ]"
        />
      </template>
    </BasicTable>
    <AccountModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive} from 'vue';

import {BasicTable, TableAction, useTable} from '/@/components/Table';
import {deleteAccountUpdate, getAccountList} from '/@/api/system/account';

import {useModal} from '/@/components/Modal';
import AccountModal from './AccountModal.vue';

import {columns, searchFormSchema} from './account.data';
import {useGo} from '/@/hooks/web/usePage';

import {usePermission} from '/@/hooks/web/usePermission';

export default defineComponent({
  name: 'AccountManagement',
  components: {BasicTable, AccountModal, TableAction},
  setup() {
    const go = useGo();
    const {hasPermission} = usePermission();
    const [registerModal, {openModal}] = useModal();
    const searchInfo = reactive<Recordable>({});
    const [registerTable, {reload, updateTableDataRecord, setLoading}] = useTable({
      title: '账号列表',
      api: getAccountList,
      rowKey: 'id',
      columns,
      showIndexColumn: false,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        autoAdvancedLine: 1,
        fieldMapToTime: [
          ['createTime', ['createTimeStart', 'createTimeEnd'], 'YYYY-MM-DD HH:mm:ss'],
        ],
      },
      useSearchForm: true,
      showTableSetting: true,
      tableSetting: { fullScreen: true },
      bordered: true,
      canResize:false,
      handleSearchInfoFn(info) {
        console.log('handleSearchInfoFn', info);
        return info;
      },
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'},
      },
    });

    function handleRefresh() {
      setLoading(true)
      setTimeout(() => {
        setLoading(false)
      }, 1000)
    }

    function handleCreate() {
      openModal(true, {
        isUpdate: false,
      });
    }

    function handleEdit(record: Recordable) {
      console.log(record);
      openModal(true, {
        record,
        isUpdate: true,
      });
    }

    async function handleDelete(record: Recordable) {
      await deleteAccountUpdate(record.id)
      reload();
    }

    function handleSuccess({isUpdate, values}) {
      if (isUpdate) {
        // 演示不刷新表格直接更新内部数据。
        // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
        const result = updateTableDataRecord(values.id, values);
        console.log(result);
      } else {
        reload();
      }
    }


    function handleView(record: Recordable) {
      go('/system/account/' + record.id);
    }

    return {
      hasPermission,
      registerTable,
      registerModal,
      handleRefresh,
      handleCreate,
      handleEdit,
      handleDelete,
      handleSuccess,
      handleView,
      searchInfo,
    };
  },
});
</script>
